<template>
    <div id="tmpl">
        <div id="silder">
            <silder :imgs='imgs'></silder>
        </div>
        <div id="desc">
            <h4>{{goodinfo.title}}</h4>
            <p id="price">市场价：
                <s>￥{{goodinfo.market_price}}</s> 销售价：
                <span>￥{{goodinfo.sell_price}}</span>
            </p>
            <p id="count">
                购买数量：<inputNumber @dataobj="getcount"></inputNumber>
                <transition name="show" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> 
                <span v-if="isshow" class="ball"></span>
                 </transition>
            </p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>
        </div>
        <div id="canshu">
            <h4>商品参数</h4>
            <p>货号：{{goodinfo.goods_no}}</p>
            <p>库存：{{goodinfo.stock_quantity}}件</p>
            <p>上架时间：{{goodinfo.add_time | datafmt('YYYY-MM-DD')}}</p>
        </div>
        <div id="details">
            <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
                <mt-button type="primary" plain size="large">图文介绍</mt-button>
            </router-link>

            <br>
            <router-link v-bind="{to:'/goods/goodscomment/'+id}">
                <mt-button type="danger" plain size="large">商品评论</mt-button>
            </router-link>

        </div>

    </div>
</template>
<script>
import silder from "../subcom/silder.vue";
import { Toast } from 'mint-ui';
import common from '../../kits/common.js';
import {vm,COUNTSTR} from '../../kits/vm.js';
import {setItem,valueObj} from '../../kits/localSg.js';
import inputNumber from '../subcom/inputNumber.vue';
export default {
    components: {
        silder,
        inputNumber
    },
    data() {
        return {
            isshow:false,
            id: 0,
            imgs: [
                // {
                //     img: "http://182.254.146.100:8080/upload/201504/20/thumb_201504200046589514.jpg",
                //     src: "http://182.254.146.100:8080/upload/201504/20/thumb_201504200046589514.jpg",
                //     url: "#"
                // },
                // {
                //     img: "http://182.254.146.100:8080/upload/201504/20/thumb_201504200046594439.jpg",
                //     src: "http://182.254.146.100:8080/upload/201504/20/thumb_201504200046594439.jpg",
                //     url: "#"
                // }

            ],
            goodinfo:
            {
                id: 100,
                title: "霍尼韦尔（Honeywel）HM-F1020-A-B HDMI高清数据线",
                add_time: "2015-04-19T19:27:39.000Z",
                goods_no: "SD5674897403",
                stock_quantity: 50,
                market_price: 59,
                sell_price: 49
            },
            inputNumber:1

        }
    },
    created() {
        this.id = this.$route.params.id;
        this.getimgs();
        this.getinfo();
    },
    methods: {
        beforeEnter(el){
            el.style.transform="translate(0px,0px)"
        },
        enter(el,done){
            el.offsetWidth;
            el.style.transform="translate(30vw,90vw)";
            done();
        },
        afterEnter(el){
            this.isshow=!this.isshow;
        },
        toshopcar(){
            vm.$emit(COUNTSTR,this.inputNumber);
            valueObj.goodsid=this.id;
            valueObj.count=this.inputNumber;
            setItem(valueObj);
            this.isshow=!this.isshow;
        },
        getimgs() {
            var url = common.apidomain + '/api/getthumimages/' + this.id;
            this.$http.get(url).then(function(res) {
                if (res.body.status != 0) {
                    Toast(res.body.message);
                    return;
                }
                this.imgs = res.body.message;
            })
        },
        getinfo() {
            var url = common.apidomain + '/api/goods/getinfo/' + this.id;
            this.$http.get(url).then(function(res) {
                if (res.body.status != 0) {
                    Toast(res.body.message);
                    return;
                }
                this.goodinfo = res.body.message[0];
            })
        },
        getcount(count){
            this.inputNumber=count;
        }
    }

}
</script>
<style scoped>
#tmpl .mint-swipe {
    height: 55vw;
}

.mint-swipe-item img {
    width: 100%;
    height: 100%;
}

#tmpl .mint-swipe-item {
    width: 100%;
    height: 55vw;
}

#silder,
#desc,
#details,
#canshu {
    border: 1px solid rgba(0, 0, 0, 0.3);
    margin: 5px;
    padding: 5px;
    border-radius: 10px;
}

#desc h4 {
    padding: 10px 0 5px 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

#desc p {
    padding-left: 5px;
    color: rgba(0, 0, 0, 0.3)
}

#desc #price s {
    color: #000;
}

#desc #price span {
    color: red;
}

#desc #count {
    color: #000;
}

#canshu h4 {
    color: rgba(0, 0, 0, 0.3);
    font-size: 14px;
    font-weight: bold;
    padding-left: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

#canshu p {
    padding: 5px;
    margin: 0;
    padding-left: 30px;
}

#details {
    padding: 10px;
}

#details mt-button {
    margin-top: 10px;
}
#count{
    position:relative;
}
#count .ball{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    display:inline-block;
    position: absolute;
    top: 0;
    left: 30vw; 
    transition:all 0.5s ease;
    z-index:100;
}
</style>


